<template>
	<div class="app-container">
		<el-dialog title="回款详情" v-model="dialogVisible" class="redius8" width="1200" center :before-close="handleClose">
		<div class="bgWhite radius8 flex col-center row-between p25">
			<div class="fb color333 fs18">
				订单编号：{{form.id}}
			</div>
			<div>
				<div class="fs14 color2">订单状态</div>
				<div class="fs20 mt10">
					<div class="flex col-center row-center"
					:class="activeStatus(form.status)"
					>
						<span class="drop"></span>
						<dict-tag :options="bus_examine_status" :value="form.status" />
					</div>
				</div>
			</div>
		</div>
		<div class="bgWhite radius8 pb30">
			<div class="pt30">
				<el-row :gutter="20">
					<el-col :span="24" class="pl30 pr30">
						<div class="pl30 pr30">
							<div class="pb25">
								<span class="fb color333 fs16">基本信息</span>
							</div>
							<div class="fs14" style="line-height: 45px;">
								<el-row class="border-bottom border-right border-left border-top">
									<el-col :span="4" class="border-right text-center bg-F5F7FA fb">回款日期</el-col>
									<el-col :span="6" class="border-right color2 pl20">{{form.paymentDate}}</el-col>
									<el-col :span="4" class="border-right text-center bg-F5F7FA fb">回款金额</el-col>
									<el-col :span="10" class="color2 pl20">¥{{form.paymentAmount}}</el-col>
								</el-row>
								<el-row class="border-bottom border-right border-left">
									<el-col :span="4" class="border-right text-center bg-F5F7FA fb">关联客户</el-col>
									<el-col :span="6" class="border-right color2 pl20">{{form.customerName}}</el-col>
									<el-col :span="4" class="border-right text-center bg-F5F7FA fb">关联订单</el-col>
									<el-col :span="10" class="color2 pl20">{{form.relatedOrder}}</el-col>
								</el-row>
								<el-row class="border-bottom border-right border-left">
									<el-col :span="4" class="border-right text-center bg-F5F7FA fb">付款方式</el-col>
									<el-col :span="6" class="border-right color2 pl20">
										<dict-tag :options="bus_pay_status" :value="form.paymentMethod" />
									</el-col>
									<el-col :span="4" class="border-right text-center bg-F5F7FA fb">业务经理</el-col>
									<el-col :span="10" class="color2 pl20">
										{{form.businessManager}}
									</el-col>
								</el-row>
								<el-row class="border-bottom border-right border-left">
									<el-col :span="4" class="border-right text-center bg-F5F7FA fb">备注信息</el-col>
									<el-col :span="6"
										class="border-right color2 pl20">{{form.paymentRemark}}</el-col>
									<el-col :span="4" class="border-right text-center bg-F5F7FA fb"></el-col>
									<el-col :span="10" class="color2 pl20"></el-col>
								</el-row>
							</div>
						</div>
					</el-col>
					<el-col>
						<div class="pl30 pr30 mt30">
							<div class="pb25">
								<span class="fb color333 fs16">系统信息</span>
							</div>
							<div class="fs14" style="line-height: 45px;">
								<el-row class="border-bottom border-right border-left border-top">
									<el-col :span="4" class="border-right text-center bg-F5F7FA fb">回款编号</el-col>
									<el-col :span="6" class="border-right color2 pl20">{{form.paymentNumber}}</el-col>
									<el-col :span="4" class="border-right text-center bg-F5F7FA fb">提交人员</el-col>
									<el-col :span="10" class="color2 pl20">
										{{form.createName}}
									</el-col>
								</el-row>
								<el-row class="border-bottom border-right border-left ">
									<!-- <el-col :span="4" class="border-right text-center bg-F5F7FA fb">审批人员</el-col>
									<el-col :span="6" class="border-right color2 pl20">李小明</el-col> -->
									<el-col :span="4" class="border-right text-center bg-F5F7FA fb">通知人员</el-col>
									<el-col :span="6" class="border-right color2 pl20">{{form.notifiedEmployeeName}}</el-col>
									<el-col :span="4" class="border-right text-center bg-F5F7FA fb">提交时间</el-col>
									<el-col :span="10" class=" color2 pl20">{{form.submissionTime}}</el-col>
								</el-row>
								<el-row class="border-bottom border-right border-left">
									<el-col :span="4" class="border-right text-center bg-F5F7FA fb">审批时间</el-col>
									<el-col :span="6" class="color2 pl20">{{form.approvalTime}}</el-col>
								</el-row>
							</div>	
						</div>	
					</el-col>
					<el-col>
						<div class="pl30 pr30 mt30">
							<div class="pb25">
								<span class="fb color333 fs16">付款截图</span>
							</div>
							<div>
								<el-image
								  class="radius8"
								  style="width: 80px; height: 80px"
								  :src="form.paymentScreenshot" 
								  :preview-src-list="[form.paymentScreenshot]">
								</el-image>
								<!-- <img width="80" height="80" class="radius8" :src="form.paymentScreenshot" alt="" /> -->
							</div>
							<div class="text-center mt25" v-if="type != 0">
								<el-button type="defaultBtn" @click="handleSuccess()" style="height: 38px;">
									审批通过
								</el-button>
								<el-button type="operate" style="width: 88px;height: 38px;border: 1px solid #FF001C; color: #FF001C;" @click="handleError()">
									审批否决
								</el-button>
							</div>
						</div>
					</el-col>		
				</el-row>
			</div>
		</div>
		</el-dialog>
		<!-- 审核通过弹窗 -->
		<successPop ref="success" :item="propItem" @refresh="goBack()"></successPop>
		<!-- 审核拒绝弹窗 -->
		<errorPop ref="error" :item="propItem" @refresh="goBack()" :type="1"></errorPop>
	</div>
</template>

<script>
	import { format } from "echarts";
	import {
		receivedDetail
	} from "@/api/business/received"
	import {
		getUserListData
	} from "@/api/business/teamOpportunity";
	import progressGroup from '@/components/Progress/index.vue' //进度条
	import errorPop from '@/views/business/afterSales/components/error.vue'//审核拒绝弹窗
	import successPop from '@/views/business/afterSales/components/success.vue'//审核通过弹窗
	export default{
		components:{
			errorPop,
			successPop,
			progressGroup
		},
		props:{
			orderNo:{
				type:String,
				default:''
			}
		},
		data(){
			return{
				dialogVisible:false,
				type:0,//只查看
				bus_pay_status:this.useDict('bus_pay_status').bus_pay_status,
				id:'',
				form:{},
				bus_order_status:this.useDict('bus_order_status').bus_order_status,
				bus_examine_status:this.useDict('bus_examine_status').bus_examine_status,//审批状态
				propItem:[]
			}
		},
		created() {
			// if(this.orderNo == ''){
			// 	this.id = this.$route.query.id ? this.$route.query.id : ''
			// }else{
			// 	this.id = this.orderNo
			// }
			// this.propItem = this.$route.query.item ? JSON.parse(this.$route.query.item) : ''
			// this.type = this.$route.query.type ? this.$route.query.type : 0
			// this.getDetail()
		},
		methods:{
			open(id){
				this.id = id
				this.dialogVisible = true
				this.getDetail()
			},
			goBack(){
				this.$tab.closePage();
			},
			//审批通过
			handleSuccess(){
				this.$refs.success.open()
			},
			//审核拒绝
			handleError(){
				this.$refs.error.open()
			},
			getDetail(){
				receivedDetail(this.id).then(res=>{
					this.form = res.data
					let arr = []
					let  notifiedEmployeeId = this.form.notifiedEmployeeId.split(',')
					this.form.noticeName = arr.join(',')
				})
			},
			
		}
	}
</script>

<style>
</style>